<template>
  <div class="user-message-container">
    <!-- 顶部标题 -->
    <div class="message-header">
      <h2>我的消息</h2>
    </div>

    <!-- 消息分类标签 -->
    <div class="message-tabs">
      <div
          v-for="tab in tabs"
          :key="tab.id"
          :class="['tab-item', { active: activeTab === tab.id }]"
          @click="activeTab = tab.id"
      >
        {{ tab.label }}
      </div>
    </div>

    <!-- 消息内容区域 -->
    <div class="message-content">
      <!-- 私信 -->
      <div v-show="activeTab === 'private'" class="message-section">
        <div class="section-title">私信</div>
        <div class="message-item" v-for="(msg, index) in privateMessages" :key="index">
          <div class="avatar-container">
            <img :src="msg.avatar" class="avatar" alt="用户头像">
          </div>
          <div class="message-details">
            <div class="message-header">
              <span class="username">{{ msg.username }}</span>
              <span class="time">{{ msg.time }}</span>
            </div>
            <div class="message-preview">{{ msg.content }}</div>
          </div>
        </div>
      </div>

      <!-- 评论 -->
      <div v-show="activeTab === 'comments'" class="message-section">
        <div class="section-title">评论</div>
        <div class="empty-placeholder">暂无评论消息</div>
      </div>

      <!-- 通知 -->
      <div v-show="activeTab === 'notices'" class="message-section">
        <div class="section-title">通知</div>
        <div class="notice-item">
          <div class="notice-content">
            <span class="notice-highlight">【新歌发布】</span>功能已升级并迁移至<span class="notice-highlight">【关注】</span>去体验
          </div>
        </div>
        <div class="notice-item important">
          <div class="notice-sender">云音乐小秘书</div>
          <div class="notice-content">
            恭喜你获得回归福利14天网易云音乐黑胶VIP，可前往会员中心查看权益到账，戳<span class="notice-link">https://music.163.com/...</span>
          </div>
        </div>
      </div>

      <!-- 一键已读按钮 -->
      <div class="mark-all-read" v-show="activeTab !== 'notices'">
        <el-button type="text" @click="markAllAsRead">一键已读</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 当前激活的标签页
const activeTab = ref('private');

// 标签页数据
const tabs = [
  { id: 'private', label: '私信' },
  { id: 'comments', label: '评论' },
  { id: 'notices', label: '通知' }
];

// 私信消息数据
const privateMessages = ref([
  {
    username: '音乐好友',
    avatar: 'https://p16-sign.tiktokcdn-us.com/tos-useast5-avt-0068-tx/1693960259942401~c5_100x100.jpeg?x-expires=1657573200&x-signature=example',
    time: '昨天 14:30',
    content: '你最近在听什么歌？推荐几首给我吧！'
  },
  {
    username: '乐队伙伴',
    avatar: 'https://p16-sign.tiktokcdn-us.com/tos-useast5-avt-0068-tx/1693960259942401~c5_100x100.jpeg?x-expires=1657573200&x-signature=example',
    time: '周一 09:15',
    content: '我们下周有演出，记得来看啊！'
  }
]);

// 一键已读功能
const markAllAsRead = () => {
  // 这里可以添加标记已读的逻辑
  console.log('所有消息已标记为已读');
};
</script>

<style scoped>
.user-message-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.message-header {
  padding: 15px 0;
  border-bottom: 1px solid #e0e0e0;
  margin-bottom: 15px;
}

.message-header h2 {
  margin: 0;
  font-size: 22px;
  color: #333;
}

.message-tabs {
  display: flex;
  margin-bottom: 20px;
  border-bottom: 1px solid #e0e0e0;
}

.tab-item {
  padding: 10px 20px;
  cursor: pointer;
  color: #666;
  font-size: 16px;
}

.tab-item.active {
  color: #ec4141;
  border-bottom: 2px solid #ec4141;
}

.message-section {
  background-color: white;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #333;
}

.message-item {
  display: flex;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.avatar-container {
  margin-right: 12px;
}

.avatar {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  object-fit: cover;
}

.message-details {
  flex: 1;
}

.message-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.username {
  font-weight: bold;
  color: #333;
}

.time {
  color: #999;
  font-size: 12px;
}

.message-preview {
  color: #666;
  font-size: 14px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.notice-item {
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.notice-item.important {
  background-color: #fff8e6;
  padding: 15px;
  border-radius: 6px;
  margin: 10px 0;
}

.notice-sender {
  font-weight: bold;
  margin-bottom: 5px;
  color: #333;
}

.notice-content {
  color: #666;
  line-height: 1.5;
}

.notice-highlight {
  color: #ec4141;
}

.notice-link {
  color: #1a73e8;
  text-decoration: underline;
  cursor: pointer;
}

.empty-placeholder {
  text-align: center;
  padding: 40px 0;
  color: #999;
}

.mark-all-read {
  text-align: right;
  margin-top: 10px;
}
</style>